<template>
    <div id="cover">
        <!--遮罩层部分-->
        <div class="box">
            <!--删除按钮-->
            <p><router-link to="" class="iconfont icon-dangao"></router-link></p>
            <!--商品选择部分-->
            <div class="num_chose">
                <div class="goods">
                    <div><img src="../../public/img/goods1.jpg" alt="" width="110"></div>
                    <div>
                        <p><span>￥169</span></p>
                        <select name="" id="size">
                            <option value="">尺寸：8寸</option>
                            <option value="">尺寸：10寸</option>
                            <option value="">尺寸：12寸</option>
                            <option value="">尺寸：14寸</option>
                        </select>
                    </div>
                </div>
                <div class="num">
                    <span>购买数量</span>
                    <div class="cul">
                        <router-link to="">-</router-link>
                        <span>1</span>
                        <router-link to="">+</router-link>
                    </div>
                </div>
            </div>
            <!--按钮部分-->
            <div class="btn">
                <button>确定</button>
                <button>取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "car_cover"
    }
</script>

<style scoped>
    #cover{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,.4);
    }
    .box{
        width: 100%;
        padding: 1rem;
        background: white;
        position: absolute;
        bottom: 55px;
    }
    /*删除按钮*/
    .box>p{
        text-align: right;
    }
    .goods{
        display: flex;
    }
    .goods div:last-child{
        margin-left: 20px;
    }
    /*尺寸选择部分*/
    .goods div:last-child select{
        margin-left: 15px;
        margin-top: 20px;
        border-radius: 10px;
        outline: none;
        border: none;
        color: #aaa;
        background: white;
    }
    /*价格部分*/
    .goods span{
        margin-left: 1rem;
    }
    /*数量部分*/
    .num{
        display: flex;
        justify-content: space-between;
        margin: 1rem 0;
    }
    .cul a{
        padding:3px 8px;
        background: #eee;
        border: 1px solid #eee;
    }
    /*“+”*/
    .cul a:first-child{
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }
    /* - */
    .cul a:last-child{
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }
    /*数字部分*/
      .cul span{
          padding:3px 8px;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
      }
      /*按钮*/
    .btn{
        display: flex;
        justify-content: space-between;
    }
    .btn button{
        width: 45%;
        height: 40px;
        border-radius: 20px;
        background:red ;
        color: white;
        border: none;
        outline: none;
    }
</style>